<template>
    <el-form ref="form" :model="data" :label-width="template.labelWidth" size="mini">
        <el-row :gutter="template.gutter">
            <el-col v-for="(ele,index) in template.content" :key="index" :span="ele.span">
                <div class="grid-content bg-purple">
                    <el-form-item :label="ele.label">
                        <el-input v-model="data[ele.model]" v-if="editStatus"></el-input>
                        <span v-else>{{data[ele.model]}}</span>
                    </el-form-item>
                </div>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>
export default {
  props: {
    template: {
      type: Object,
      default: function() {
        return {
          labelWidth: "80px",
          gutter: 20,
          content: [
            {
              label: "组织名称",
              span: 6,
              type: "input",
              model: "name"
            }
          ]
        };
      }
    },
    data: {
      type: Object,
      default: function() {
        return { name: "测试一下" };
      }
    },
    editStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataTemp: {}
    };
  },
  created() {
    this.redata();
  },
  watch: {
    editStatus: function() {
      if (this.editStatus) {
        this.redata();
      }
    }
  },
  methods: {
    redata() {
      this.dataTemp = JSON.parse(JSON.stringify(this.data));
    }
  }
};
</script>
